<template>
  <div class="headd">
    <div class="box">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="属性名称:" class="liu">
          <el-input
            v-model="formInline.user"
            placeholder="请输入属性名称"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <div class="button">
            <el-button
              type="primary"
              icon="el-icon-search"
              @click="btn(formInline.user)"
              >搜索</el-button
            >
            <el-button icon="el-icon-delete" @click="clear">清空</el-button>
          </div>
        </el-form-item>
      </el-form>
    </div>
    <div class="iconn">
      <el-button type="primary" icon="el-icon-plus" class="new" @click="newadd"
        >新增</el-button
      >
      <div class="iconn1">
        <el-button class="rol" icon="el-icon-refresh"></el-button>
        <el-button class="rol" icon="el-icon-search"></el-button>
      </div>
    </div>
    <div class="centt">
      <template>
        <el-table :data="tableData" style="width: 100%">
          <el-table-column label="序号" width="50" type="index">
          </el-table-column>
          <el-table-column label="属性名称" width="494">
            <template slot-scope="scope">
              <span style="margin-left: 10px">{{ scope.row.propName }}</span>
            </template>
          </el-table-column>
          <el-table-column label="属性值" width="494">
            <template slot-scope="scope">
              <el-tag size="medium" v-for="(item, index) in scope.row.prodPropValues" :key="index">{{
              item.propValue
            }}</el-tag>
            </template>
           
          </el-table-column>
          <el-table-column label="操作" width="350">
            <template slot-scope="scope">
              <el-button
                size="mini"
                @click="handleEdit(scope.$index, scope.row.propId)"
                >编辑</el-button
              >
              <el-button
                size="mini"
                type="danger"
                @click="handleDelete(scope.$index, scope.row.propId)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </template>
    </div>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :page-sizes="[10, 20, 30, 40, 50, 100]"
      :page-size="10"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>

    <el-dialog title="新增" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <div class="inp-box">
          <div class="inp-top clear">
            <div class="inp-top-left">
              <span>属性名称</span>
            </div>
            <div class="inp-top-right">
              <span>属性值</span>
            </div>
          </div>
          <div class="inp-bottom clear">
            <div class="inp-bottom-left">
              <el-input
                type="text"
                placeholder="请输入内容"
                v-model="text1"
                clearable
                maxlength="10"
                show-word-limit
              ></el-input>
            </div>
            <div class="inp-bottom-right">
              <el-input
                type="text"
                placeholder="请输入内容"
                v-model="text"
                v-for="(item,index) in list2"
                :key="index"
                clearable
                maxlength="20"
                @input="change(item)"
                show-word-limit
              ></el-input>
              <el-button type="primary" icon="el-icon-circle-plus" class="add" v-if="this.vvv==true" @click="non()"></el-button>
            </div>
          </div>
        </div>
      </el-form>
      <div slot="footer" class="footer">
        <el-button @click="qu1">取 消</el-button>
        <el-button type="primary" @click="que(text1)">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog title="编辑" :visible.sync="dialogFormVisible1">
      <el-form :model="form">
        <div class="inp-box">
          <div class="inp-top clear">
            <div class="inp-top-left">
              <span>属性名称</span>
            </div>
            <div class="inp-top-right">
              <span>属性值</span>
            </div>
          </div>
          <div class="inp-bottom clear">
            <div class="inp-bottom-left">
              <el-input
                type="text"
                placeholder="请输入内容"
                v-model="text2"
                clearable
                maxlength="10"
                show-word-limit
              ></el-input>
            </div>
            <div class="inp-bottom-right">
              <el-input
                type="text"
                placeholder="请输入内容"
                v-model="text3"
                v-for="(item,index) in list"
                :key="index"
                clearable
                maxlength="20"
                @input="change1(item)"
                show-word-limit
              ></el-input>
              <el-button type="primary" icon="el-icon-circle-plus" class="add" v-if="this.vvv1==true" @click="non1()"></el-button>
            </div>
          </div>
        </div>
      </el-form>
      <div slot="footer" class="footer">
        <el-button @click="qu">取 消</el-button>
        <el-button type="primary" @click="que1(text2)">确 定</el-button>
      </div>
    </el-dialog>

  </div>
</template>
    </div>
  </div>
</template>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      text1:'',
      text2:'',
      text3:'1',
      text: "",
      list:[
        {
        
          propValue:''
        }
      ],
      ttt1:'',
      list1:[
     
      ],
      list11:[
       
       ],
      list2:[
      {
          
          propValue:''
        }
      ],
     vvv:false,
     id:'',
     vvv1:false,
      form: {},
      dialogFormVisible: false,
      dialogFormVisible1: false,
      as: 1,
      size: 10,
      total: 0,
      tableData: [],
      arr: [],
      arr1: [],
      
      timestamp: Math.floor(Date.now() / 1000),
      formInline: {
        user: "",
        region: "",
      },
    };
  },
  created() {
    this.getlist();
  },

  methods: {
    getlist() {
      this.$http
        .get("http://admin.yami.byesame.com/apis/prod/spec/page", {
          params: {
            t: this.timestamp,
            current: 1,
            size: this.size,
          },
        })
        .then((res) => {
          console.log(res);
          this.total = res.data.total;
          this.tableData = res.data.records;
          for (let i = 0; i < res.data.records.length; i++) {
            this.arr.push(res.data.records[i].prodPropValues);
          }

          console.log(this.arr);
        });
    },
    formattedDate() {
      this.timestamp = Math.floor(Date.now() / 1000);
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.size = val;
      this.getlist();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.as = val;
      this.$http
        .get("http://admin.yami.byesame.com/apis/prod/spec/page", {
          params: {
            t: this.timestamp,
            current: this.as,
            size: this.size,
          },
        })
        .then((res) => {
          console.log(res);
          this.total = res.data.total;
          this.tableData = res.data.records;
        });
    },
    onSubmit() {
      console.log("submit!");
    },
    btn(a) {
      this.$http
        .get("http://admin.yami.byesame.com/apis/prod/spec/page", {
          params: {
            t: this.timestamp,
            current: this.as,
            size: this.size,
            propName: a,
          },
        })
        .then((res) => {
          this.total = res.data.total;
          this.tableData = res.data.records;
        });
    },
    clear() {
      this.formInline.user = "";
      this.getlist();
    },
    newadd() {
      this.dialogFormVisible = true;
    },
    qu() {
      this.dialogFormVisible1 = false;
    },
    qu1() {
      this.dialogFormVisible = false;
    },
    que(a) {
      this.$http.post('http://admin.yami.byesame.com/apis/prod/spec',{
        prodPropValues:this.list1,
        propName:a,
        t: this.timestamp

      }).then((res)=>{
        console.log(res)
      })
      this.dialogFormVisible = false;
    },
    que1(a) {
      this.$http.put('http://admin.yami.byesame.com/apis/prod/spec',{
        data:{
        prodPropValues:this.list,
        propName:a,
        propId:this.id,
        t: this.timestamp
        }
        

      }).then((res)=>{
        console.log(res)
      })
      this.dialogFormVisible1 = false;
    },
    change(a){
      console.log(a)
     
      this.vvv=true
    },
    change1(a){
      console.log(a)
     
      this.vvv1=true
    },
    non(){
      this.list2.push({ propValue:this.text})
      this.vvv=false
      console.log(this.list1)
    },
    non1(){
      this.list.push({propValue:this.text3})
      this.vvv1=false
      console.log(this.list1)
    },
    handleEdit(a,b){
      console.log(a,b)
      this.id=b
      this.dialogFormVisible1 = true;
    },
    handleDelete(a,b){
      this.$confirm('确定进行[删除]操作?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
          this.$http.delete('http://admin.yami.byesame.com/apis/prod/spec/'+b).then((res)=>{
        console.log(res)
      })
      this.getlist()
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
      console.log(a,b)
    
    
    }
  },
};
</script>

<style scoped>
>>> .liu .el-input__inner {
  flex: 25%;
  width: 258px;
  height: 28px;
}
.liu {
  margin-left: 20px;
  flex: 25%;
}
.yang {
  flex: 25%;
}
.box {
  width: 100%;
  display: flex;
  text-align: center;
}
>>> .el-button--primary {
  padding: 6px 15px;
}
>>> .el-button--default {
  padding: 6px 15px;
}
.button {
  width: 200px;
  margin-left: 30%;
  flex: 50%;
}
.rol {
  padding: 8px;
  border-radius: 50%;
}
.iconn {
  width: 100%;
  margin-bottom: 10px;
  margin-right: 5px;
}
>>> .cell {
  font-size: 12px;
  text-align: center;
  color: black;
}
>>> .el-table th {
  background-color: #fafafa;
}
.iconn1 {
  float: right;
}
.new {
  float: left;
  padding: 9px 15px;
  margin-bottom: 5px;
}
.site-wrapper .el-pagination {
  padding: 20px;
}
.inp-box {
  width: 100%;
  /* height: 179px; */
  border: 1px solid #ECEEF5;
}
.inp-bottom {
  text-align: center;
}
>>> .inp-bottom-left .el-input {
 
  width: 386px;
  height: 40px;
}
>>> .inp-bottom-right .el-input {
 
  width: 187px;
  height: 40px;
 
}
.inp-bottom-left{
  width: 50%;
  border: 1px solid #ECEEF5;
  padding: 10px;
  float: left;
}
.inp-bottom-right{
  width: 50%;
  border-left: 1px solid #ECEEF5;
  text-align: left;
  padding: 10px;
  float: left;
}
.inp-top-left {
  float: left;
  border: 1px solid #ECEEF5;
  height: 50px;
  width: 50%;
  text-align: center;
  padding: 10px;
  font-size: 14px;
  color: #9a9ca1;
  font-weight: 600;
}
.inp-top-right {
  border: 1px solid #ECEEF5;
  float: right;
  height: 50px;
  padding: 10px;
  width: 50%;
  font-size: 14px;
  font-weight: 600;
  color: #9a9ca1;
  text-align: center;
}
.clear:after {
  display: block;
  content: "";
  clear: both;
}
.footer .el-button--default{
  padding: 11px 18px;
}
.footer .el-button--primary{
  padding: 11px 18px;
}
.add{
  margin-left: 10px;
  padding: 11px 18px;
}
</style>